<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<h3>精彩评论</h3>-->
<!--<ul th:each="comment:${comments}">-->
<!--    <li>-->
<!--        <img th:src="${comment.icon}"/>-->
<!--        <span th:text="${comment.nickName}"></span>-->
<!--        <span th:text="${comment.content}"></span>-->
<!--    </li>-->
<!--    <li>-->
<!--        <label>评论时间</label>-->
<!--        <span th:text="${comment.commentTime}"></span>-->
<!--        <label>点赞数</label>-->
<!--        <span th:text="${comment.likeNum}"></span>-->
<!--    </li>-->
<!--</ul>-->
<h1>评论</h1>
<form action="/comments/post" method="post">
    <input type="hidden" name="nickName" value="">
    <input type="hidden" name="songId" value="35847388">
    <input type="text" name="content" style="width:80%;height:100px;" placeholder="填写你的评论"/>
    <br/>
    <button type="submit">评论</button>
</form>
<h3>
    <ul>精彩评论</ul>
</h3>
<ul th:each="comment:${comments}">
    <li>
        <img th:src="${comment.icon}"/>
        <span th:text="${comment.nickName}"></span>
        <span th:utext="${comment.content}"></span>
    </li>
    <li>
        <label>评论时间：</label>
        <span th:text="${#dates.format(comment.commentTime,'yyyy-MM-dd HH:mm:ss')}"></span>
        <label>点赞数</label>
        <a href="#" th:data-id="${comment.id}" class="like-btn">
            <span th:text="${comment.likeNum}"></span>
        </a>
    </li>
</ul>
<!--<script type="text/javascript" src="jquery-3.5.0.min.js"></script>-->
<!--<script>-->
<!--    $(function () {-->
<!--        //获取一个连接的集合，绑定事件-->
<!--        $(".like-btn").on('click',function (e) {-->
<!--            e.preventDefault();//阻止默认事件-->
<!--            var self=$(this);//定位当前连接-->
<!--            var commentId=self.data('id');//jquery提供的API得到ID-->
<!--            $.ajax({-->
<!--                url:"/comments/like",-->
<!--                method:"POST",-->
<!--                data:{-->
<!--                    songId:"35847388",-->
<!--                    commentId:commentId-->
<!--                },-->
<!--                cache:false-->
<!--            })-->
<!--            .done(function (data) {-->
<!--                self.html(data.likeNum);-->
<!--            })-->
<!--        })-->
<!--    })-->
<!--</script>-->
</body>
</html>